<template>
    <transition name="f-slides">
        <div class="f-slides-item" v-if="visible" :class="{reverse}">
            <slot></slot>
        </div>
    </transition>
</template>

<script>
  export default {
    name: "f-slides-item"
    ,props:{
      name:{
        type:String
        ,required:true
      }
    }
    ,data(){
      return {
        selected:undefined
        ,reverse:false
      }
    }
    ,computed:{
      visible(){
        return this.selected === this.name;
      }
    }
  }
</script>

<style lang="scss">
    .f-slides-leave-active{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:red !important;
        /*border:10px solid red;*/
    }
    .f-slides-enter-active,.f-slides-leave-active{
        transition:all 1s;
    }
    .f-slides-enter {
        transform: translateX(100%);
    }
    .f-slides-leave-to {
        transform: translateX(-100%);
    }
    .f-slides-enter.reverse {
        transform: translateX(-100%);
    }
    .f-slides-leave-to.reverse {
        transform: translateX(100%);
    }
</style>
